<template>
  <div class="box">
    <ul :class="[sex == 'male' ? 'fb' : 'bf']">
      <!-- <li :class="[isScroll ? 'active' : 'other_avitve']"> -->
      <li :class="[isScroll ? 'active' : 'other_avitve']">
        <a href="#">
          <div class="front"><span class="iconfont icon-nan1"></span></div>
          <div class="back"><span class="iconfont icon-nvren"></span></div>
          <!-- <div class="back"><img src="../../assets/img/1.webp" /></div> -->
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["sex", "showProp"],
  data() {
    return {
      isScroll: Boolean,
    };
  },
  methods: {},
  watch: {
    showProp: {
      immediate: true,
      handler(val) {
        this.isScroll = val;
      },
    },
  },
};
</script>
<style lang="less" scoped>
img {
  vertical-align: bottom;
}

.box {
  width: 200px;
  height: 200px;
  perspective: 1000px;
}

.box ul li {
  width: 200px;
  height: 200px;
  position: relative;
  .iconfont{
    font-size: 100px;
    &.icon-nan1{
      color:black
    }
    &.icon-nvren{
      color: pink;
    }
  }
}


.box ul li a div {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
  transition: 0.5s all;
  backface-visibility: hidden;
}

//男生
.box ul.fb li a div.front {
  z-index: 1;
}
.box ul.fb li a div.back {
  //翻到背面了
  transform: rotateY(-180deg);
}
.box ul.fb li.active .front {
  transform: rotateY(180deg);
}
.box ul.fb li.active .back {
  transform: rotateY(0deg);
}

//女生
.box ul.bf li a div.front {
  z-index: 1;
}
.box ul.bf li a div.back {
  transform: rotateY(-180deg);
}

.box ul.bf li.other_avitve .front {
  transform: rotateY(180deg);
}
.box ul.bf li.other_avitve .back {
  transform: rotateY(0deg);
}
</style>